<template>
  <div class="maintain">
    <a-row
      :gutter="[10, 10]"
      ref="el"
      v-show="list.length"
    >
      <a-col
        class="maintain-col"
        v-for="(item, index) in list"
        :key="item.id"
      >
        <a-card
          hoverable
          :bordered="false"
        >
          <template #cover>
            <a-image
              :width="140"
              :alt="item.title"
              :src="item.cover"
              :fallback="noImg"
            />
          </template>
          <template #actions>
            <EditOutlined
              title="编辑"
              key="edit"
              @click="handleEdit({ ...item, sort: index })"
            />
            <a-popover
              placement="top"
              trigger="click"
              v-if="item.username || item.password"
            >
              <template #content>
                <p v-if="item.username">
                  <a-typography-text :copyable="{ text: item.username }">账号：{{ item.username }}</a-typography-text>
                </p>
                <p v-if="item.password">
                  <a-typography-text :copyable="{ text: item.password }">密码：{{ item.password }}</a-typography-text>
                </p>
              </template>
              <InfoCircleOutlined
                title="详情"
                key="info"
              />
            </a-popover>
            <a-popconfirm
              cancel-text="取消"
              ok-text="确认"
              title="确认删除？"
              @confirm="handleDelete(item)"
            >
              <DeleteOutlined
                title="删除"
                key="delete"
                style="color: #ff4d4f"
              />
            </a-popconfirm>
          </template>
          <a-card-meta>
            <template #title>{{ item.title }}</template>
            <template #description>
              <a-typography-link
                :href="item.url"
                target="_blank"
                copyable
              >
                {{ item.url }}
              </a-typography-link>
            </template>
          </a-card-meta>
        </a-card>
      </a-col>
    </a-row>

    <div
      class="maintain-empty"
      v-show="showEmpty"
    >
      <a-empty />
    </div>

    <teleport to="#app">
      <a-float-button
        title="新增"
        class="maintain-plus"
        @click="handleAdd"
      >
        <template #icon>
          <PlusOutlined class="maintain-icon" />
        </template>
      </a-float-button>
    </teleport>

    <maintainModal
      ref="modal"
      @modalOk="getList"
    />
  </div>
</template>
<script setup>
import Service from '@/utils/service.js'
import { useBoolean } from '@/hooks/index.js'
import maintainModal from './src/maintainModal.vue'
import noImg from '@/assets/error-images/no-img.png'
import { useDraggable } from 'vue-draggable-plus'
import { FloatButton as AFloatButton, message } from 'ant-design-vue'
import { debounce } from 'lodash-es'

const list = ref([])
const [showEmpty, toggleShowEmpty] = useBoolean()
const getList = async () => {
  const { code, data } = await Service.getAction('/maintain/list')
  if (code === 200) {
    list.value = data.records
    if (!list.value) {
      toggleShowEmpty(true)
    }
  }
}
getList()

const modal = ref()

const handleAdd = () => {
  modal.value.handleAdd()
}

const handleEdit = record => {
  modal.value.handleEdit(record)
}

const handleDelete = record => {
  return Service.deleteAction('/maintain/delete', {
    id: record.id,
  }).then(({ code, msg }) => {
    if (code === 200) {
      getList()
      message.success('删除成功！')
    } else {
      message.error(msg)
    }
  })
}

const el = ref()
const handleSortList = debounce(
  async () => {
    const res = list.value.map((item, index) => {
      return {
        id: item.id,
        sort: index,
      }
    })
    await Service.postAction('/maintain/updateSort', res)
  },
  1000,
  {
    leading: true,
  }
)
const { start } = useDraggable(el, list, {
  animation: 150,
  onUpdate: handleSortList,
})
</script>
<style scoped lang="scss">
.maintain {
  width: 100%;

  :deep(.ant-card-cover) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    height: 240px;
  }

  :deep(.ant-card) {
    width: 265px;
    min-height: 360px;
    cursor: move;
  }

  &-col {
    width: 275px;
    min-height: 360px;
  }

  &-plus {
    width: 80px;
    height: 80px;

    :deep(.ant-float-btn-icon) {
      width: 36px !important;
      font-size: 36px !important;
    }
  }

  &-icon {
    font-size: 36px;
    color: #999;
  }

  &-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: $contentHeight;
  }
}
</style>
